<script>
import Block from '../Block'
import WithDialog from '@/components/WithDialog/withDialog'

import { courses } from '@/api/train'

export default {
    components: {
        Block,
        WithDialog,
    },
    props: {
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        fetchCoursesFn: {
            type: Function,
            requried: true,
            default: () => { }
        },
        value:{
            type:Array,
            required:true,
            default(){
                return []
            }
        },
        isActionDisabled:{
            type:Boolean,
            required:false,
            default:false
        },

        confirmBtnLoading:{
            type:Boolean,
            default:false
        },
        confirmBtnDisabled:{
            type:Boolean,
            default:false
        },

        cancelBtnDisabled:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            courses: [],
            isLoading: false,
            paging: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            }
        }
    },
    computed: {
        coursesFormatted() {
            return this.courses
        },
        dialogVisible: {
            get() {
                return this.visible
            },
            set(visible) {
                this.$emit('update:visible', visible)
            }
        }
    },
    methods: {
        handleSelectionChange(rows){
            this.$emit('input',rows)
        },
        toggleRowSelection(rows){
            if (rows) {
                rows.forEach(row => {
                    this.$refs.table.toggleRowSelection(row);
                })
            }
        },
        async getCourses() {
            try {
                this.isLoading = true
                let params = {
                    currentPage: this.paging.currentPage,
                    pageSize: this.paging.pageSize
                }


                let result = await this.fetchCoursesFn(params)

                this.paging.total = result.totalPage
                this.courses = result.data
            } catch (e) {
                console.log(e,'e');
            }finally{
                this.isLoading = false
            }
        },
        handlePageChange(currentPage) {
            this.paging.currentPage = currentPage
            this.refreshTable()
        },
        handlePageSizeChange(size) {
            this.paging.pageSize = size
            this.refreshTable()
        },
        refreshTable(){
            this.getCourses()
        },
        closeSelector(){
            if(this.isActionDisabled)
                return
                
            this.dialogVisible = false
        },
        handleClose(close){
            close(!this.isActionDisabled)
        },
        handleConfirm(){
            this.$emit('confirm')
        }
    },
    watch:{

    },
    created() {
        this.getCourses()
    }
}
</script>

<template>
    <div class="course-selector-container">
        <WithDialog 
            :visible.sync="dialogVisible"
            :cancelBtnDisabled="cancelBtnDisabled"
            :confirmBtnDisabled="confirmBtnDisabled"
            :confirmBtnLoading="confirmBtnLoading"
            @cancel="closeSelector"
            @confirm="handleConfirm"
            title="课程选择"
        >
            <el-table 
                ref="table"
                :data="coursesFormatted" 
                style="height: 50vh; overflow: auto;width: 100%"
                :loading="isLoading" 
                row-key="id"
                border 
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" />
                <el-table-column label="课程封面">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.cover" style="width: 60px;height: 60px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="课程名称" />
                <el-table-column prop="createdDate" label="创建日期" />
                <el-table-column prop="day" label="期限天数" />
            </el-table>
            <el-pagination 
                background 
                hide-on-single-page
                layout="prev, pager, next" 
                :total="paging.total" 
                @size-change="handlePageSizeChange"
                @current-change="handlePageChange" 
            />
        </WithDialog>
    </div>
</template>

<style lang="scss">
.course-selector-container {
    .el-pagination {
        padding: 16px 0;

        .btn-prev,
        .btn-next {
            margin: 0;
            margin-right: 6px;
        }
    }
}
</style>